/*
 * @Description: 触发条件弹窗
 * @Author: Rfan
 * @Date: 2022-08-03 20:29:15
 * @LastEditTime: 2022-08-04 17:17:29
 */

import { useEffect } from 'react';
import { Button, Form, Input, Modal, Radio, Select } from 'antd';
import type { ICommonDialog } from '@/interfaces/global';

interface ITriggerPaneProps extends ICommonDialog {}
function TriggerCondDialog(props: ITriggerPaneProps) {
  const { visible, onClose } = props;
  const [form] = Form.useForm();

  useEffect(() => {
    if (visible) {
      //
    }
  }, [visible]);

  /**
   * @description: 关闭弹窗
   */
  const onCancel = () => {
    form.resetFields();
    onClose();
  };

  /**
   * @description: 提交表单方法
   * @param {any} values 表单数据
   */
  const onFinish = (values: any) => {
    //
  };

  return (
    <Modal
      title="触发条件设定"
      visible={visible}
      width={600}
      destroyOnClose
      onCancel={onCancel}
      footer={[
        <Button key="close" onClick={onCancel}>
          取消
        </Button>,
        <Button
          key="create"
          type="primary"
          onClick={() => {
            onCancel();
          }}
        >
          添加
        </Button>
      ]}
    >
      <Form
        form={form}
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 14 }}
        preserve={false}
        onFinish={onFinish}
      >
        <Form.Item
          name="triggerRule"
          label="触发规则类型"
          extra="系统监控时间到期时，触发鉴定"
          rules={[{ required: true }]}
        >
          <Radio.Group>
            <Radio value={1}>时间触发</Radio>
            <Radio value={2}>事件触发</Radio>
            <Radio value={3}>自定义触发</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item
          noStyle
          shouldUpdate={(prevValues, currentValues) =>
            prevValues.triggerRule !== currentValues.triggerRule
          }
        >
          {({ getFieldValue }) => (
            <>
              {getFieldValue('triggerRule') === 1 && (
                <>
                  <Form.Item label="检测时间">
                    <Select></Select>
                  </Form.Item>
                  <Form.Item label="备注">
                    <Input.TextArea />
                  </Form.Item>
                </>
              )}
              {getFieldValue('triggerRule') === 2 && (
                <Form.Item label="请选择事件">
                  <Select></Select>
                </Form.Item>
              )}
              {getFieldValue('triggerRule') === 3 && (
                <Form.Item label="请编写表达式">
                  <Input.TextArea></Input.TextArea>
                </Form.Item>
              )}
            </>
          )}
        </Form.Item>
      </Form>
    </Modal>
  );
}

export default TriggerCondDialog;
